<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/md5.min.js"></script>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
</head>

<body>
    <div id="app">
        <!-- 背景图 -->
        <!-- <img class="bg" ref="musBg" :src="musicAlbum.cover500 || musicAlbum.cover200"></img> -->

        <div class="bodyContent">
            <section>
                <div class="cdRomContent">
                    <!-- 封面图 -->
                    <img ref="cdRomImg" class="cdRomImg" :src="musicAlbum.cover500 || musicAlbum.cover200"></img>
                    <div class="cdCard"></div>
                    <div class="timeContent">
                        <div class="starTime" v-text="starTime"></div>
                        <div class="endTime" v-text="allTime"></div>
                    </div>
                    <canvas ref="canvasDraw" width="310" height="310" class="canvasContent"></canvas>
                    <canvas ref="onloading" width="310" height="310" class="onloading"></canvas>
                    <div class="buttonContent">
                        <div v-if="playBtrue" class="playMusice" @click="playBtn('play')" id="playMusice"></div>
                        <div v-else class="pauseMusice" @click="playBtn('pause')" id="pauseMusice"></div>
                    </div>
                </div>
            </section>
            <div>
                <audio @canplay="loadeddataEv" @timeupdate="currentTimeEv" ref="audio" preload="auto" @ended="endEv" ref='audio' :src="url"></audio>
            </div>
            <div class="songInfo">
                <h1 v-text="locale === 'zh' ? list.trackCtitle||list.trackTitle : list.trackTitle"></h1>
                <p v-text="list.author"></p>
                <p v-text="locale === 'zh' ? musicAlbum.catalogueCname||musicAlbum.catalogueName : musicAlbum.catalogueName"></p>
            </div>
            <div class="foot">
                <div class="logo">
                    <img :src="logo ? logo : './img/logo.png'" alt="logo">
                    <span v-text="locale === 'zh' ? appName.zh:appName.en"></span>
                </div>
                <div class="download">
                    <div v-if="isWeixin" @click="dialogFn" v-text="locale === 'zh' ? '立即下载' : 'Download'"></div>
                    <div v-else-if="link == ''" @click="iosDownload" v-text="locale === 'zh' ? '立即下载' : 'Download'"></div>
                    <a v-else :href="link" target="_blank" v-text="locale === 'zh' ? '立即下载' : 'Download'"></a>
                </div>
            </div>
            <div v-show="visited" class="dialog">
                <div v-if="isWeixin">
                    <div class="upContent"><img src="./img/upEn.png" /></div>
                    <div class="upText" v-text="locale === 'zh' ? `微信无法直接下载，点击右上角选择“在浏览器中打开”，即可下载${weiXinTitle.zh}APP` : `Wechat cannot download it directly. Click the upper right corner and select 'open in browser' to download ${weiXinTitle.en}`"></div>
                </div>
            </div>
            <!-- 下载弹窗 -->
            <div v-show="isDownDialog" class="downDialog">
                <div class="box">
                    <span>{{locale === 'zh' ? '30s试听结束':'30s Audition ends'}}<br>{{locale === 'zh' ? '请下载app听更多单曲':'Please download the app to listen to more singles'}}</span>
                    <div class="downBox">
                        <div v-if="isWeixin" class="downBtn" @click="dialogFn" v-text="locale === 'zh' ? '立即下载' : 'Download now'"></div>
                        <div v-else-if="link == ''" class="downBtn" @click="iosDownload" v-text="locale === 'zh' ? '立即下载' : 'Download'"></div>
                        <a v-else :href="link" class="downBtn" target="_blank" v-text="locale === 'zh' ? '立即下载' : 'Download now'"></a>
                        <img class="close" @click="isDownDialog = false" src="./img/close.png" alt="关闭">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data: {
            locale: '', // 识别系统语言
            list:{},
            url: '', // 播放地址
            musicAlbum: {},
            sourceType: '',
            sourceId: '',
            detailsDto: [],
            blurb: '',
            catalogueName: '',
            catalogueCname: '',
            isDownDialog: false, //试听结束-下载弹框
            visited: false,
            isWeixin: false,
            message: '',
            bgImg: '',
            starTime: '',
            playBtrue: true, //播放暂停
            disbledPlay: false, //禁止播放
            myAudio: '',
            doDeg: null,
            degNum: 0.3,
            cdRomImg: null,
            allTime: '',
            endTime: '',
            context: null,
            centerX: '',
            centerY: '',
            rad: null,
            speed: 0.1,
            raId: null,
            contextLoad: null,
            canvasOnload: null,
            myCurrentTime: '00:00',
            timer1: null,
            nowIndex: 0,
            playOrder: 0, //0：顺序播放 1：单曲循环 2：随机播放
            link: '',
            isAndroid: '',
            isIOS: '',
            appName: {
                zh: "库客音乐图书馆",
                en: "KUKE Music Library"
            },
            weiXinTitle: {
                zh: "库客音乐图书馆机构版",
                en: "KUKE Music Library (Institutional Version)"
            },
            logo: "", //logo地址
        },
        methods: {
            iosDownload() {
                alert(this.locale === 'zh' ? '敬请期待':'Coming soon');
            },
            dialogFn() {
                this.visited = true
                this.isDownDialog = false
            },
            playBtn(type) {
                if(type === "play") {
                    //试听结束-禁止播放
                    if(this.disbledPlay === true){
                        this.isDownDialog = true;
                        return;
                    } else {
                        if (this.url) {
                            this.myAudio.play()
                            this.playBtrue = false
                            this.startAdnim()
                        } else {
                            alert(this.locale === 'zh' ? "播放失败,请检查网络环境":"Playback failed. Please check the network environment")
                        }

                    }
                } else if (type === "pause"){
                    this.myAudio.pause()
                    this.playBtrue = true
                    this.stopAdnim()
                }
            },
            // 时间戳转00:00
            formatSeconds(value) {
				var secondTime = parseInt(value); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime >= 60) {
					minuteTime = parseInt(secondTime / 60);
					secondTime = parseInt(secondTime % 60);
					if (minuteTime >= 60) {
						hourTime = parseInt(minuteTime / 60);
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				var result ="" +(parseInt(secondTime) < 10? "0" + parseInt(secondTime): parseInt(secondTime));

				if (minuteTime > 0) {
					result ="" + (parseInt(minuteTime) < 10? "0" + parseInt(minuteTime) : parseInt(minuteTime)) + ":" + result;
				}
				if (hourTime > 0) {
					result ="" + (parseInt(hourTime) < 10 ? "0" + parseInt(hourTime): parseInt(hourTime)) +":" + result;
				}
				return result;
			},
            loopContent() { //播放顺序

            },
            playAudio() {

            },
            // playDef(mus) { //音频配置

            //     this.cdRomImg.src = this.imgList[this.nowIndex]
            //     this.myAudio.src = this.musList[mus]
            // },
            playMusice() { //播放暂停

            },
            startAdnim() { //唱片转动
                this.doDeg = setInterval(() => {
                    this.degNum++
                        this.cdRomImg.style.transform = "rotate(" + this.degNum + "deg)"
                        this.drawFrame()
                }, 30);
            },
            stopAdnim() { //暂停唱片转动
                clearInterval(this.doDeg)
            },
            loadeddataEv() { // 获取音频时间
                this.allTime = this.formatSeconds(this.myAudio.duration)
                // (this.myAudio.duration / 60).toFixed(2)
                // console.log(this.allTime)
            },
            currentTimeEv() { //获取当前的播放时间
                this.starTime = "00:" + this.formatSeconds(this.myAudio.currentTime)
                if (this.myAudio.currentTime > 30) {
                    this.playBtn("pause");
                    this.disbledPlay = true;
                    this.isDownDialog = true;
                }
            },
            contTime() { //播放时间计时
                clearInterval(this.timer1)
                let that = this
                this.timer1 = setInterval(function() {
                    let crrTime = that.myAudio.currentTime;
                    that.myCurrentTime = (crrTime / 60).toFixed(2)
                }, 1000);
            },
            nextEv() { //下一曲

            },
            prevEv() { //上一曲

            },
            endEv() {

            },
            initLoad() {
                this.canvasOnload = this.$refs.onloading
                this.context = this.canvasOnload.getContext('2d') //获取画图环境，指明为2d
                this.centerX = this.canvasOnload.width / 2 //this.canvasOnload中心点x轴坐标
                this.centerY = this.canvasOnload.height / 2 //Canvas中心点y轴坐标
                this.rad = Math.PI * 2 / 100
                this.speed = 0.1;
            },
            initCanvas() {
                let canvas = this.$refs.canvasDraw
                this.contextLoad = canvas.getContext('2d') //获取画图环境，指明为2d
            },
            //绘制蓝色圈
            blueCircle(n) {
                this.context.save();
                this.context.strokeStyle = "#333333"; //设置描边样式
                this.context.lineWidth = 5; //设置线宽
                this.context.lineCap = 'round'
                this.context.beginPath(); //路径开始
                this.context.arc(this.centerX, this.centerY, 150, 18 * Math.PI / 16, 18 * Math.PI / 16 - n * this.rad, true); // 用于绘制圆弧this.context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                this.context.stroke(); //绘制
                this.context.closePath(); //路径结束
                this.context.restore();
            },
            //绘制白色
            whiteCircle() {
                this.contextLoad.save();
                this.contextLoad.lineWidth = 5;
                this.contextLoad.lineCap = 'round'
                this.contextLoad.beginPath();
                this.contextLoad.strokeStyle = "#D6D6D6";
                this.contextLoad.arc(this.centerX, this.centerY, 150, -2 * Math.PI / 16, 18 * Math.PI / 16, false);
                this.contextLoad.stroke();
                this.contextLoad.closePath();
                this.contextLoad.restore();
            },
            drawFrame() { //播放进度动画
                // this.raId = requestAnimationFrame(this.drawFrame, this.canvasOnload);
                this.context.clearRect(0, 0, this.canvasOnload.width, this.canvasOnload.height);
                // whiteCircle();
                // text(speed);
                // console.log(45 / (allTime * 60 * 60))
                // this.speed += 30 / ((this.myAudio.duration / 60).toFixed(2) * 60 * 60);
                this.speed = this.myAudio.currentTime / this.myAudio.duration * 63;
                // 62.5 / 30 / 1000 * 30
                // console.log(this.speed)
                // console.log(this.allTime)
                // if (this.speed > 30 || this.disbledPlay == true) {
                //     cancelAnimationFrame(this.raId)
                //     this.speed = 0;
                // }
                this.blueCircle(this.speed);
            },
            // 修改title
            editTitle(locale){
                let title = document.getElementsByTagName('title')[0];
                title.innerText = locale === 'zh' ? '库客音乐图书馆机构版' : 'KUKE Music Library PRO';
            }
        },
        mounted() {
            this.locale = navigator.language.substring(0, 2).toLowerCase();
            let ua = navigator.userAgent.toLowerCase();
            let dialog = document.querySelector('.dialog')
            this.isWeixin = ua.indexOf('micromessenger') != -1;

            let iosLinkUrl = "" // https://apps.apple.com/cn/app/%E5%BA%93%E5%AE%A2%E9%9F%B3%E4%B9%90hi-res/id1564214901 下载地址ios
            let androidLinkurl = "https://hoss.kuke.com/app_v1.0.1_hires_2c_10000009_2021-05-25.apk" //) android
            dialog.style.height = document.documentElement.clientHeight + 'px'

            let u = navigator.userAgent
            this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
            this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            this.link = this.isIOS ? iosLinkUrl : androidLinkurl

            this.myAudio = this.$refs.audio
            this.cdRomImg = this.$refs.cdRomImg
            this.musBg = this.$refs.musBg
            this.initLoad()
            this.initCanvas()
            this.whiteCircle()

            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                // var query = "&sourceId=954153&appId=1493885765335588864"
                var myArr = query.split("&");
                for (var i = 0; i < myArr.length; i++) {
                    var pair = myArr[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            }
            // 单类型App下载地址
            if(getQueryVariable('appId') && getQueryVariable('appId') !== "null") {
                axios.post('https://bapi.kuke.com/single/app/v100/getCompanyAppInfoByShare',{
                    appId:getQueryVariable('appId')
                }).then(res => {
                if(res.data.code === 1000000) {
                    let result = res.data.source;
                    // title
                    document.getElementsByTagName('title')[0].innerText = result.appName;
                    // foot - App名
                    this.appName = this.weiXinTitle =  {
                        zh: result.appName,
                        en: result.appName
                    }
                    this.logo = result.logoMaxUrl; //设置logo
                    // 设置下载链接
                    if(this.isIOS) {
                        if(result.iosStoreUrl) {
                            this.link = result.iosStoreUrl
                        } else {
                            this.link = "";
                        }
                    } else {
                        if(result.androidPackageUrl) {
                            this.link = result.androidPackageUrl
                        } else {
                            this.link = "";
                        }
                    }
                } else {
                    alert(this.locale === 'zh' ? "获取失败,请检查网络环境":"Failed to get. Please check the network environment")
                }
                })
            } else {
                this.editTitle(this.locale);
            }
            this.sourceId = getQueryVariable('sourceId')
            let params = {
                trackId: this.sourceId,
                token: "",
            }
            // console.log(params)
                // https://hires.kuke.com/music/detail
            axios.post('https://bapi.kuke.com/app/v100/getComposition', params).then(async (res) => {
                // console.log(res.data.source)
                if(res.data.code === 1000000) {
                    this.list = res.data.source;
                    this.musicAlbum = res.data.source.musicAlbum;
                    let apiKey = "8c314cd5d048a7ed787282daa26fc517";
                    let apiSecret = "6e68662e-0cca-468e-a5b4-e2c4812ddc32";
                    let time = +new Date();
                    let param = {
                        apiKey: apiKey,
                        sign: md5(apiKey + apiSecret + time) + time,
                        snid: "1",
                        userId: "1",
                        trackId: res.data.source.trackId,
                        quality:
                            res.data.source.hifi == 1
                                ? "hifi"
                                : res.data.source.kbps320 == 1
                                ? "320"
                                : res.data.source.kbps192 == 1
                                ? "192"
                                : res.data.source.kbps64
                                ? "64"
                                : "",
                        terminal: "Web",
                    }
                    axios.get('https://data-api.kuke.com/v3/channel/track/address',{params: param}).then(result => {
                        if(result.data.code === "success") {
                            this.url = result.data.data;
                        } else {
                            alert(this.locale === 'zh' ? "地址获取失败,请检查网络环境" : "Failed to obtain the address. Check the network environment");
                        }
                    })
                } else {
                    this.list = {};
                    alert(this.locale === 'zh' ? "未获取到单曲信息,请检查网络环境" : "No single information is obtained. Check the network environment");
                }
            })

        }
    })
</script>
<style>
    .upContent {
        text-align: right;
    }

    .upContent img {
        width: 7.4rem;
        height: 7.7rem;
    }

    .upText {
        color: #fff;
        padding: 0 2rem
    }

    .dialog {
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        width: 100%;
    }

    .infoContent {
        padding: 0 1.5rem
    }

    .musiceList {
        padding: 0 1.5rem;
        padding-bottom: 2rem;
    }

    .codeNum {
        margin-right: 15px;
    }

    .musiceList>div {
        margin: 5px 0;
        font-size: 1.4rem;
    }
    .foot{
        width: 92%;
        height: 6rem;
        position: fixed;
        left: 0;
        bottom: 2rem;
        z-index: 12;
        margin: 0 4% 0 4%;
        background: url(./img/downBg.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .foot .logo{
        display: flex;
        align-items: center;
    }
    .foot .logo >img{
        width: 4.6rem;
        height: 4.6rem;
        margin: 0 1rem;
    }
    .foot .logo >span{
        font-weight: 500;
        color: #FFFFFF;
    }
    .download >div, .download >a {
        width: 8.6rem;
        height: 3rem;
        line-height: 3rem;
        margin-right: 1rem;
        border-radius: 3.3rem;
        display: block;
        text-align: center;
        background: #FFFFFF;
        font-weight: 400;
        color: #D72518;
    }
    a {
        text-decoration: none;
    }

    h2 {
        margin: 0;
    }

    .loopContent,
    .loopOne,
    .loopOther {
        width: 3.5rem;
        height: 2.6rem;
    }

    .loopContent {
        background: url(img/loop.png) no-repeat center;
        background-size: contain;
    }

    .loopOne {
        background: url(img/oneLoop.png) no-repeat center;
        background-size: contain;
    }

    .loopOther {
        background: url(img/other.png) no-repeat center;
        background-size: contain;
    }

    .musList {
        background: url(img/list.png) no-repeat center;
        background-size: contain;
    }

    .prevMusice,
    .nextMusice,
    .musList {
        width: 3.04rem;
        height: 2.13rem;
    }

    .playMusice,
    .pauseMusice {
        width: 5.1rem;
        height: 5.1rem;
    }

    .prevMusice {
        background: url(img/left.png) no-repeat center;
        background-size: contain;
    }

    .nextMusice {
        background: url(img/right.png) no-repeat center;
        background-size: contain;
    }

    .pauseMusice {
        background: url(img/pause.png) no-repeat center;
        background-size: contain;
    }

    .playMusice {
        background: url(img/play.png) no-repeat center;
        background-size: contain;
    }

    .message {
        margin-top: 2rem;
        padding: 0 1.5rem;
        display: flex;
        align-items: center;
    }

    .museName {
        flex: 1;
    }

    .museName h6 {
        font-size: 1.4rem;
    }

    .upMus {
        width: 3rem;
        height: 3rem;
        background: url(img/upMus.png) no-repeat center;
        background-size: contain;
    }

    .buttonContent {
        position: absolute;

    }

    article {
        text-align: center;
    }

    html {
        font-size: 10px;
        height: 100%;
        overflow: hidden;
    }

    body {
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .bodyContent {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bg {
        position: absolute;
        height: 100%;
        width: 100%;
        font-size: 10px;
        /* background: url(img/bg.png) no-repeat center; */
        background-size: cover;
        filter: blur(100px);
        -webkit-filter: blur(100px);
    }

    section {
        width: 100%;
    }

    .cdRomContent {
        padding: 4rem 0;
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
    }

    .cdRomImg {
        width: 28rem;
        height: 28rem;
        border-radius: 50%;
        transform: rotate(45deg);
    }

    .timeContent {
        position: absolute;
        width: 86%;
        display: flex;
        font-size: 1.3rem;
        top: 9.6rem;
        justify-content: space-between;
        color: #B7B7B7;
        font-weight: bold;
    }

    .canvasContent,
    .onloading {
        position: absolute;
        padding: 1rem;
    }
    .songInfo {
        width: 90%;
        text-align: center;
    }
    .songInfo >h1, .songInfo>p {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .downDialog{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .downDialog .box{
        /* .wh(894,482); */
        width: 80%;
        height: 26%;
        font-size: 1.5rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .downDialog .box .downBox {
        width: 100%;
        border-top: 0.1rem solid #999999;
        text-align: center;
    }
    .downDialog .box .downBox .downBtn{
        display: block;
        color: #D72518;
        font-size: 1.7rem;
        font-weight: bold;
        text-align: center;
        margin: auto;
        padding: 1rem 0 1rem 0;
    }
    .downDialog .box >span{
        text-align: center;
        font-size: 1.7rem;
        margin-top: 3.5rem;
        line-height: 3rem;
        padding: 0 1rem 0 1rem;
    }
    .downDialog .box .close{
        width: 2.4rem;
        height: 2.4rem;
        position: absolute;
        bottom: -7.1rem;
        left: 46%;
    }
</style>